import React, { useContext, useMemo } from 'react'
import { Table, Button, Popover } from 'antd'
import { ColumnsType } from 'antd/es/table/interface'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.less'
import IconSvg from '@/components/IconSvg'
import { contextForHospital } from '../../_context'
import { STATUS, IWardList } from '../../type/hospital'

export default () => {
  const navigate = useNavigate()
  const { tableParams } = useContext(contextForHospital)
  const { wardReportList } = tableParams
  // 根据状态值判断状态
  const getStatus = (status: STATUS) => {
    if (status === STATUS.DONE) {
      return <div className={`${styles.done} ${styles.status}`}>已提交</div>
    }
    if (status === STATUS.NO) {
      return <div className={`${styles.no} ${styles.status}`}>未提交</div>
    }
    if (status === STATUS.SEND_BACK) {
      return <div className={`${styles.sendBack} ${styles.status}`}>已退回</div>
    }
  }

  const creatReason = (item: string) => (
    <div style={{ whiteSpace: 'pre-wrap' }} className={styles.reason}>
      {item}
    </div>
  )

  // 检查其他病区是否已提交
  const checkAllWard = () =>
    wardReportList
      .filter((wardItem) => wardItem.wardId)
      .some((wardItem) => wardItem.status === 0 || wardItem.status === 2)
  const columns: ColumnsType<IWardList> = [
    {
      title: '病区',
      dataIndex: 'wardName',
      key: 'wardName',
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (value, record) => (
        <>
          {value === 2 && record.returnReason ? (
            <>
              <Popover content={creatReason(record.returnReason!)} title='退回原因'>
                <div className={styles.statusWrapper}>
                  {getStatus(value)}
                  {record.reportTime}
                </div>
              </Popover>
            </>
          ) : (
            <>
              <div className={styles.statusWrapper}>
                {getStatus(value)}
                {record.reportTime}
              </div>
            </>
          )}
        </>
      ),
    },
    {
      title: '操作',
      align: 'center',
      width: 320,
      render: (value, record) => {
        if (record.wardName === '全院' && record.status !== STATUS.DONE && record.isProceed === 0) {
          return (
            <Button
              onClick={() => navigate(`/report-detail?id=${record.dataId}&onlyLook=${0}`)}
              type='link'
              icon={<IconSvg name='report-icon' style={{ marginRight: '4px' }} />}
              disabled={checkAllWard()}
            >
              开始填报
            </Button>
          )
        }
        return (
          <Button
            onClick={() => navigate(`/report-detail?id=${record.dataId}&onlyLook=${1}`)}
            type='link'
            icon={<IconSvg name='look-detail' style={{ marginRight: '4px' }} />}
          >
            查看详情
          </Button>
        )
      },
    },
  ]
  return (
    <Table
      scroll={{ y: 'calc(100vh - 470px)' }}
      pagination={false}
      className={styles.tableHeader}
      columns={columns}
      dataSource={wardReportList}
      rowKey='dataId'
    />
  )
}
